import classNames from 'classnames';
import styles from '@/app/[locale]/home/home.module.scss';
import Image from 'next/image';
import { getCover } from '@/lib/tool';
import Link from 'next/link';
import type { IPath, IPost } from '@/interfaces';
import { useContext } from 'react';
import { HomePageContext } from '@/contexts/home';
import Nodata from '@/app/[locale]/common/nodata/nodata';
import { useTranslations } from 'use-intl';

export default function RightHome(
  this: any,
  {
    isLoading,
    onClickRefresh,
    items = [],
    data,
  }: {
    isLoading?: boolean;
    onClickRefresh: () => void;
    items?: IPost[];
    data: IPath;
  },
) {
  return (
    <div
      className={classNames(
        'd-none d-lg-block col-2 me-2 position-sticky overflow-y-auto',
        styles.pc_right,
      )}
    >
      <div className="vstack gap-4">
        <ShortcutBtn isLogin={!!data.user} />
        <RelatedPost
          isLoading={isLoading}
          onClickRefresh={onClickRefresh}
          items={items}
        />
        <Footer data={data} />
      </div>
    </div>
  );
}

const ShortcutBtn = ({ isLogin }: { isLogin?: boolean }) => {
  const t = useTranslations('HomePage');

  return (
    <div className="row">
      <div className="col px-0 vstack gap-2">
        {isLogin ? (
          <Link href="/posts/new" className="btn btn-primary">
            <i className="bi bi-plus-lg me-2"></i>
            {t('createPost')}
          </Link>
        ) : (
          <>
            <Link href="/login" className="btn btn-primary">
              <i className="bi bi-person me-2"></i>
              {t('loginNow')}
            </Link>
            <Link href="/register" className="btn btn-primary">
              <i className="bi bi-person-add me-2"></i>
              {t('quickRegister')}
            </Link>
          </>
        )}
      </div>
    </div>
  );
};

const RelatedPost = ({
  isLoading,
  onClickRefresh,
  items = [],
}: {
  isLoading?: boolean;
  onClickRefresh: () => void;
  items?: IPost[];
}) => {
  const context = useContext(HomePageContext);
  const metadata = context.metadata!;
  const env = metadata.env;
  const t = useTranslations('HomePage');

  return (
    <div className="row">
      <div className="col px-0">
        <div className="card border-0">
          <div className="card-body vstack gap-3">
            <div className="d-flex align-items-center fs-5 gap-2 fw-semibold">
              {t('relatedArticles')}
            </div>

            {items.length > 0 && (
              <div className="vstack gap-2">
                {items.map((item) => {
                  return (
                    <Link
                      title={item.overview ? item.overview : item.name}
                      key={item.id}
                      href={`/posts/${item.id}`}
                      className="text-reset text-decoration-none"
                    >
                      <div
                        className={classNames(
                          'd-flex gap-2 rounded pe-2',
                          styles.pc_right_post,
                        )}
                      >
                        <div
                          className="d-flex rounded justify-content-center align-items-center flex-shrink-0 yw-bg ratio ratio-4x3 overflow-hidden"
                          style={{ width: 112, height: 84 }}
                        >
                          {item.cover ? (
                            <Image
                              className="rounded object-fit-contain"
                              src={getCover(item.cover, metadata)}
                              alt={item.name}
                              width={112}
                              height={84}
                              placeholder="blur"
                              blurDataURL={env.APP_BLUR_DATA_URL}
                            />
                          ) : (
                            <i className="bi bi-journal-text fs-2 d-flex justify-content-center align-items-center"></i>
                          )}
                        </div>
                        <div
                          className="flex-grow-1 overflow-hidden vstack gap-2 justify-content-between"
                          style={{ height: 84 }}
                        >
                          <div className="text-truncate">{item.name}</div>
                          <div
                            className="text-truncate small text-secondary"
                            dangerouslySetInnerHTML={{
                              __html: item.overview || t('noDescription'),
                            }}
                          ></div>
                        </div>
                        <div className="align-self-center">
                          <i className="bi bi-arrow-right"></i>
                        </div>
                      </div>
                    </Link>
                  );
                })}
              </div>
            )}

            {items.length === 0 && <Nodata />}

            <button
              disabled={items.length === 0 || isLoading}
              onClick={onClickRefresh}
              type="button"
              className="btn text-secondary-emphasis mt-4 mb-3"
            >
              {isLoading ? (
                <span
                  className="spinner-border spinner-border-sm me-2"
                  role="status"
                  aria-hidden="true"
                ></span>
              ) : (
                <i className="bi bi-arrow-clockwise me-2"></i>
              )}
              {t('changeBatch')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Footer = ({ data }: { data: IPath }) => {
  const context = useContext(HomePageContext);
  const env = context.metadata!.env;
  const t = useTranslations('HomePage');

  return (
    <>
      {data.siteConfig &&
      Object.values(data.siteConfig).filter((item) => item).length > 1 ? (
        <div className="row">
          <div className="col px-0">
            <div className="card border-0">
              <div className="card-body">
                {data.siteConfig.mpImageLink && (
                  <div className="row">
                    <div className="col">
                      <div className="ratio ratio-16x9">
                        <Image
                          className="rounded object-fit-contain"
                          src={data.siteConfig.mpImageLink}
                          alt={`${env.APP_NAME_ABBR} ${t('miniProgramCode')}`}
                          title={`${env.APP_NAME_ABBR} ${t('miniProgramCode')}`}
                          width={652}
                          height={240}
                          placeholder="blur"
                          blurDataURL={env.APP_BLUR_DATA_URL}
                        />
                      </div>
                    </div>
                  </div>
                )}

                <div className="row row-cols-2 g-3">
                  {data.siteConfig.helpLink && (
                    <div className="col">
                      <Link
                        href={data.siteConfig.helpLink}
                        className="text-muted text-decoration-none text-decoration-underline-hover"
                      >
                        <i className="bi bi-question-circle me-2"></i>
                        {t('help')}
                      </Link>
                    </div>
                  )}
                  {data.siteConfig.feedbackLink && (
                    <div className="col">
                      <Link
                        href={data.siteConfig.feedbackLink}
                        className="text-muted text-decoration-none text-decoration-underline-hover"
                      >
                        <i className="bi bi-chat-square-text me-2"></i>
                        {t('feedback')}
                      </Link>
                    </div>
                  )}
                  {data.siteConfig.reportLink && (
                    <div className="col">
                      <Link
                        href={data.siteConfig.reportLink}
                        className="text-muted text-decoration-none text-decoration-underline-hover"
                      >
                        <i className="bi bi-flag me-2"></i>
                        {t('report')}
                      </Link>
                    </div>
                  )}
                  {data.siteConfig.githubLink && (
                    <div className="col">
                      <a
                        rel="noreferrer"
                        target="_blank"
                        className="text-muted text-decoration-none text-decoration-underline-hover"
                        href={data.siteConfig.githubLink}
                      >
                        <i className="bi bi-github me-2"></i>
                        Github
                      </a>
                    </div>
                  )}
                </div>

                <div className="my-2"></div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <Nodata />
      )}
    </>
  );
};
